<template>
	<div class="docpage homeContHeight">
		<div class="docPageCont backTop">
			<ul class="leaveItems">
				<li class="leavesLis" v-for="(chatLis,index) in chatItem" :key="chatLis.id">
					<Card>
						<div>
							<p>{{chatLis.diaryText}}</p>
							<div class="leavesSta">
								<span class="leavesStaTime">{{chatLis.diaryTime}}</span>
								<span class="leavesStaDel" @click="removeleaves(index)">删除</span>
							</div>
						</div>
					</Card>
				</li>
			</ul>
			<Spin size="large" fix v-if="spinShow"></Spin>
		</div>
		<Page :total="100" @on-change="handleChange"></Page>
	</div>
</template>

<script>
import notices from '../pageModule/notices';
export default{
	name: 'docpage',
	components: {
		notices
	},
	data: function (){
		return {
			chatItem: '', //闲聊内容列表的初始化
			pageList: '', //分页组件初始化
			spinShow: true, //加载层初始化
			noticeText: ''  //信息提示内容
		}
	},
	mounted() {
		this.$ajax.get("https://www.easy-mock.com/mock/5a93ac92bf782667fe4c7a32/followTest/someChats").then(response => {
			// success callback
			this.chatItem = response.data.data.datas ////获取模拟的动态数据
			this.pageList = response.data.data.datas  //处理分页
			this.spinShow = false //数据加载成功之后处理掉加载层的遮罩
		}, response => {
			// error callback
			alert('数据加载失败...')
		})
	},
	methods: {
		handleChange(page) {
            this.pageList.splice(0, this.pageList.length);
            this.pageList = this.list.slice((page - 1) * 9,page * 9);
		},
		removeleaves: function (index) {  
			console.log('1321321')
			this.noticeText = '删除成功！';//删除成功后显示信息
			this.chatItem.splice(index, 1);  
		}
	}

}
</script>

<style>
.docpage{
	width: 100%;
	height: calc(100% - 35px);
	margin-bottom: 35px;
}  
.docPageCont{
	width: 100%;
    height: 100%;
    padding: 10px 20px;
    position: relative;
    overflow: auto;
}    
.leavesLis{
	margin-bottom: 20px;
}    
.leavesStaDel{
	cursor: pointer;
	margin-left: 10px;
}                     
.leavesStaDel:hover{
	color: #0781da;
	-moz-user-select:none;
    -webkit-user-select: none;       
    -ms-user-select: none; 
}  
.leaveItems .leavesLis div{text-align: left;font-size: 14px;}  
.leavesSta{color: #ccc;}                         
</style>